<template>
  <van-nav-bar
    class="nav-bar"
    :fixed="true"
    :left-text="props.title"
    left-arrow
    @click-left="onClickLeft"
  />
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  title: String,
  goBack: Function
})

const emits = defineEmits([])
const onClickLeft = () => {
  typeof props.goBack == 'function' && props.goBack || router.go(-1)
}
</script>

<style lang='scss'>
.nav-bar {
  background: rgba(20, 22, 30, 0.8);
  box-shadow: 0 0 7px 0 rgba(0,0,0,.1);
  .van-nav-bar__title,
  .van-nav-bar__text,
  .van-icon {
    color: #fff;
  }
}
.van-nav-bar:after {
  border: none;
}
</style>